<template>
	<cover-view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
		<cover-view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)">
			<cover-image class="item-img active" :src="item.icon_a" v-if="idx == index"></cover-image>
			<cover-image class="item-img " :src="item.icon" v-else></cover-image>

		</cover-view>
	</cover-view>
</template>

<script>
	export default {
		props: {
			idx: String
		},
		data() {
			return {
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				list: [{
						text: '首页',
						icon: '/static/index.png', //未选中图标
						icon_a: '/static/index-o.png', //选中图片
						path: "/pages/index/index", //页面路径
					}, {
						text: '分类',
						icon: '/static/kind.png',
						icon_a: '/static/kind-o.png',
						path: "/pages/kind/kind",
					}

					, {
						text: '收藏',
						icon: '/static/col.png',
						icon_a: '/static/col-o.png',
						path: "/pages/collect/collect",
					}, {
						text: '个人',
						icon: '/static/home.png',
						icon_a: '/static/home-o.png',
						path: "/pages/home/home",
					}
				]
			};
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		watch: {

		},
		methods: {
			tabbarChange(path) {
				console.log("123")
				uni.switchTab({
					url: path
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tabbarActive {
		color: white !important;
	}

	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 154rpx;
		// background-color: #a1b275;
		background: url("/static/foot-bg.png") no-repeat -8rpx 0px;
		background-size: calc(100vw+16rpx);

		.tabbar-item {
			display: flex;
			flex-direction: column;
			margin-top: 50rpx;
			align-items: center;
			justify-content: center;
			height: 100rpx;

			.item-img {
				width: 36rpx;
				height: 36rpx;
				border-radius: 22rpx;
				padding: 12rpx;

				&.active {
					background-color: #A1B275;
				}
			}

			.item-name {
				font-size: 26rpx;
				color: #bdc5a8;
			}
		}
	}
</style>